<script setup lang='ts'>
import { ref } from "vue";
import { useIndexStore } from '@/stores/index'
import { storeToRefs } from "pinia";
const indexStore = useIndexStore()
let { ispc, isOff } = storeToRefs(indexStore)

const videoshow = ref(false)

const togglePlay = () => {
    const video = document.getElementById('video') as HTMLVideoElement
    if (video.paused) {
        videoshow.value = true
        video.play()
        // 如果背景音乐开启状态，则暂停背景音乐
        if (isOff.value) {
            isOff.value = false
        }
        video.requestFullscreen()
        video.controls = true
    } else {
        video.pause()
    }
}

</script>

<template>
    <div class="videobox box bg3 clmcenter">
        <img src="@/assets/img/logo.png" class="logo" alt="logo">
        <!-- <button type="button" class="btn btn_goback btn_goback_cn" @click="$router.replace('/en/main')">BACK</button> -->
        <img src="@/assets/img/back.png" class="btn_goback" @click="$router.replace('/en/main')">
        <div class="container clmstart">
            <div class="stitle stitle_en">
                <img src="@/assets/img/title_left.png" class="title_left anileft" />
                <p>XinQuan Intelligent Manufacturing Center Promotion Video</p>
                <img src="@/assets/img/title_right.png" class="title_right aniright" />
            </div>
            <div class="videoinfobox clmcenter" :style="{ marginTop: ispc ? '' : '2.5vw' }">
                <img src="@/assets/img/videobg_en.png" class="videoposter" v-show="!videoshow" />
                <img src="@/assets/img/videobox.png" class="videowrapper" @click="togglePlay" />
                <img src="@/assets/img/btn_play.png" class="playbtn" v-show="!videoshow" />
                <div class="videosource">
                    <video src="https://mh-hongkong.oss-cn-hongkong.aliyuncs.com/xinquan/video/welcome_en.mp4"
                        id="video" controls preload="auto"></video>
                    <!-- x5-video-player-type='h5-page' x5-video-player-fullscreen='true' webkit-playsinline
                        playsinline -->
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.videobox {
    .container {
        position: relative;
        width: 100%;
        .videoinfobox {
            position: relative;
            margin-top: 5.2vw;
            width: 65.99vw;
            height: 28.4375vw;
            // box-shadow: 0 0 1.09vw 0.83vw rgba($color: #000000, $alpha: 0.3);
            filter: drop-shadow(0.2vw 0.65vw 0.4vw rgba(0, 0, 0, 0.3));
            .videoposter {
                position: relative;
                z-index: 2;
                width: 100%;
                height: 100%;
                clip-path: polygon(3.23vw 0, 100% 0, 100% calc(100% - 3.281vw), calc(100% - 3.281vw) 100%, 0 100%, 0 3.285vw, 3.23vw 0);
            }
            .videowrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 4;
                cursor: pointer;
            }
            .playbtn {
                position: absolute;
                z-index: 3;
                width: 4.95vw;
            }
            .videosource {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                width: 65.99vw;
                height: 28.4375vw;
                background-color: #000;
                clip-path: polygon(3.23vw 0, 100% 0, 100% calc(100% - 3.281vw), calc(100% - 3.281vw) 100%, 0 100%, 0 3.285vw, 3.23vw 0);
                overflow: hidden;
                #video {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }
}
</style>